<template>
  <div>
    <input type="text" v-focus />
    <p v-color="'red'">123</p>
    <p v-color="'blue'">123</p>
    <input type="text" v-model="msg" v-validate="msg" />
  </div>
</template>

<script>
// 我们如果想操作DOM,可以在mounted中写,但是如果有多个组件需要操作相同的DOM处理,这个mounted逻辑就需要
// 写多次,所以这个时候我们就可以封装一个自定义指令
// 自定义指令是用来封装DOM操作,好处在于DOM操作只需要写一次,然后在任何组件都可以使用
// 自定义指令有两种 一种是局部的,一种是全局,一般我们平时只会使用全局的,因为如果你定义一个局,这个自定义指令没有意义
// 全局自定义指令在main.js中定义
export default {
  // mounted() {
  //   this.$refs.myinput.focus();
  // },
  data() {
    return {
      msg: "hel",
    };
  },
  methods: {},
  // directives: {
  //   focus: {
  //     inserted(el) {
  //       el.focus();
  //     },
  //   },
  // },
};
</script>

<style scoped></style>
